<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="郝珍华">
    <title></title>
    <style>
        body {
            margin: 0;
            background-color: #f1f2f3;
        }

        .container {
            height: 51px;
            padding-top: 1px;
            border-top: 1px solid #e3e7e8;
            border-bottom: 1px solid #e3e7e8;
            background-color: #FFF;
            color: #555;
        }

        nav {
            width: 1340px;
            position: relative;
            margin: 0 auto;
        }

        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        li {

            margin-right: 6px;
            float: left;
            height: 51px;
            position: relative;
        }

        li a {
            padding: 0 5px;
            font-size: 14px;
            color: #555;
            line-height: 50px;
            text-decoration: none;
            display: block;
        }

        .shou a {
            color: #2fb3ff;
            border-bottom: 2px solid #2fb3ff;
        }

        .juji ul {

            /* margin-left: -67px; */
            position: absolute;
            padding: 12px 0;
            left: 0;
            width: 100px;
            background: #FFF;
            border: solid 1px #ebebeb;
            width: 230px;
            display: none;
        }

        .juji3 ul {

            /* margin-left: -67px; */
            position: absolute;
            padding: 12px 0;
            left: 0;
            width: 100px;
            background: #FFF;
            border: solid 1px #ebebeb;
            width: 230px;
            display: none;
        }

        .juji1 ul {

            /* margin-left: -67px; */
            position: absolute;
            padding: 12px 0;
            left: 0;
            width: 100px;
            background: #FFF;
            border: solid 1px #ebebeb;
            width: 230px;
            display: none;
        }

        .juji2 ul {

            /* margin-left: -67px; */
            position: absolute;
            padding: 12px 0;
            left: 0;
            width: 100px;
            background: #FFF;
            border: solid 1px #ebebeb;
            width: 230px;
            display: none;
        }

        .juji ul .ju {
            left: 50%;
            margin-left: -11px;
            display: inline-block;
            /* position: absolute; */
            width: 13px;
            height: 8px;

            top: -8px;
            background: url('2.png') -112px 0 no-repeat;
        }

        .juji1 ul .ju {
            left: 50%;
            margin-left: -11px;
            display: inline-block;
            /* position: absolute; */
            width: 13px;
            height: 8px;

            top: -8px;
            background: url('2.png') -112px 0 no-repeat;
        }

        .juji2 ul .ju {
            left: 50%;
            margin-left: -11px;
            display: inline-block;
            /* position: absolute; */
            width: 13px;
            height: 8px;

            top: -8px;
            background: url('2.png') -112px 0 no-repeat;
        }

        .juji3 ul .ju {
            left: 50%;
            margin-left: -11px;
            display: inline-block;
            /* position: absolute; */
            width: 13px;
            height: 8px;

            top: -8px;
            background: url('2.png') -112px 0 no-repeat;
        }

        .juji ul li {

            margin: 0 0 0 10px;
            height: 30px;
            line-height: 30px;
            float: left;
        }

        .juji1 ul li {

            margin: 0 0 0 10px;
            height: 30px;
            line-height: 30px;
            float: left;
        }

        .juji2 ul li {

            margin: 0 0 0 10px;
            height: 30px;
            line-height: 30px;
            float: left;
        }

        .juji3 ul li {

            margin: 0 0 0 10px;
            height: 30px;
            line-height: 30px;
            float: left;
        }

        a:hover {
            color: red;
        }

        .gengduo {
            width: 52px;
            line-height: 50px;
            font-size: 14px;
            text-align: center;
            float: left;
        }

        b {
            /* overflow: hidden; */
            display: inline-block;
            width: 9px;
            height: 5px;
            text-align: left;
            line-height: 0;
            font-size: 0;
            vertical-align: middle;
            background: url(2.png) -60px 0 no-repeat;
            transition: all 0.3s linear;
        }



        .gengduo .sanjiao {
            left: 50%;
            margin-left: -15px;
            display: inline-block;
            /* position: absolute; */
            width: 13px;
            height: 8px;
            left: 46px;
            top: -19px;
            background: url(2.png) -112px 0 no-repeat;
        }

        .gengduo ul {
            /* position: absolute; */
            padding: 12px 0;
            left: -19px;
            width: 100px;
            background: #FFF;
            border: 1px solid #ebebeb;
            height: 190px;
            display: none;
        }

        .gengduo ul li {

            margin-left: 10px;
        }
    </style>
</head>

<body>
    <div class="container">
        <nav>
            <ul>
                <li class="shou">
                    <a href="#">首页</a>
                </li>
                <li class="juji">
                    <a href="#">剧集</a>
                    <ul>
                        <li class="ju"></li>
                        <li>
                            <a href="#">楚乔传 TV版</a>
                        </li>
                        <li>
                            <a href="#">春风十里不如你</a>
                        </li>
                        <li>
                            <a href="#">镇魂街 第一季</a>
                        </li>
                        <li>
                            <a href="#">我的前半生</a>
                        </li>
                        <li>
                            <a href="#">醉玲珑</a>
                        </li>
                        <li>
                            <a href="#">微微一笑很倾城</a>
                        </li>
                        <li>
                            <a href="#">终极三国</a>
                        </li>
                        <li>
                            <a href="#">三生三世十里桃花</a>
                        </li>
                    </ul>
                </li>
                <li class="juji1">
                    <a href="#">电影</a>
                    <ul>
                        <li class="ju"></li>
                        <li>
                            <a href="#">速度与激情8</a>
                        </li>
                        <li>
                            <a href="#">人间大炮</a>
                        </li>
                        <li>
                            <a href="#">战狼</a>
                        </li>
                        <li>
                            <a href="#">杀破狼2</a>
                        </li>
                        <li>
                            <a href="#">逆时营救</a>
                        </li>
                        <li>
                            <a href="#">营救大师</a>
                        </li>
                        <li>
                            <a href="#">我的外星女友</a>
                        </li>
                        <li>
                            <a href="#">有部电影</a>
                        </li>
                    </ul>
                </li>
                <li class="juji2">
                    <a href="#">综艺</a>
                    <ul>
                        <li class="ju"></li>
                        <li>
                            <a href="#">
                                <atrr title="极限挑战第三季">极限挑战...</atrr>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <atrr title="挑战者联盟第三季">挑战者联盟...</atrr>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <atrr title=" 脑大洞开第三季"> 脑大洞开....</atrr>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <atrr title=" 火星情报局第三季"> 火星情报局....</atrr>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <atrr title="暴走动画disanji">暴走动画....</atrr>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <atrr title="日日煮第三季">日日煮.....</atrr>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <atrr title="开心俱乐第三季">开心俱乐.....</atrr>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <atrr title=" 举杯呵呵第四季"> 举杯呵呵....</atrr>
                            </a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">音乐</a>
                </li>
                <li class="juji3">
                    <a href="#">少儿</a>
                    <ul>
                        <li class="ju"></li>
                        <li>
                            <a href="#">楚乔传 TV版</a>
                        </li>
                        <li>
                            <a href="#">春风十里不如你</a>
                        </li>
                        <li>
                            <a href="#">镇魂街 第一季</a>
                        </li>
                        <li>
                            <a href="#">我的前半生</a>
                        </li>
                        <li>
                            <a href="#">醉玲珑</a>
                        </li>
                        <li>
                            <a href="#">微微一笑很倾城</a>
                        </li>
                        <li>
                            <a href="#">终极三国</a>
                        </li>
                        <li>
                            <a href="#">三生三世十里桃花</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">来疯</a>
                </li>
                <li>
                    <a href="#">直播</a>
                </li>
                <li>
                    <a href="#">片库</a>
                </li>
                <li>
                    <a href="#">资讯</a>
                </li>
                <li>
                    <a href="#">纪实</a>
                </li>
                <li>
                    <a href="#">公益</a>
                </li>
                <li> <a href="#">体育</a></li>
                <li> <a href="#">纪实</a></li>
                <li> <a href="#">纪实</a></li>
                <li> <a href="#">纪实</a></li>
                <li> <a href="#">纪实</a></li>
                <li> <a href="#">纪实</a></li>
                <li> <a href="#">纪实</a></li>
                <li> <a href="#">纪实</a></li>
                <li> <a href="#">游戏</a></li>
                <li> <a href="#">纪实</a></li>
                <li> <a href="#">纪实</a></li>
                <li> <a href="#">纪实</a></li>
                <li> <a href="#">纪实</a></li>

            </ul>
            <div class="gengduo">
                <span>更多
                <b></b>
                </span>
                <ul>
                    <li class="sanjiao"></li>
                    <li>
                        <a href="#">VR</a>
                    </li>
                    <li>
                        <a href="#">生活</a>
                    </li>
                    <li>
                        <a href="#">原创</a>
                    </li>
                    <li>
                        <a href="#">排行</a>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
</body>

</html>
<script>
    var gengduo = document.querySelector('.gengduo');
    var ull = document.querySelector('.gengduo ul');
    gengduo.onmouseover = function () {
        ull.style.display = 'block';
    }
    gengduo.onmouseout = function () {
        ull.style.display = 'none';
    }





    var juji = document.querySelector('.juji a');
    var lis = document.querySelector('.juji ul');
    juji.onmouseover = function () {
        lis.style.display = 'block';
        lis1.style.display = 'none';
    }
    lis.onmouseover = function () {
        lis.style.display = 'block';
        lis1.style.display = 'none';
    }
    lis.onmouseout = function () {
        lis.style.display = 'none';
        lis1.style.display = 'none';
    }
    var juji1 = document.querySelector('.juji1 a');
    var lis1 = document.querySelector('.juji1 ul');
    juji1.onmouseover = function () {
        lis1.style.display = 'block';
        lis.style.display = 'none';
        lis2.style.display = 'none';

    }
    lis1.onmouseover = function () {
        lis1.style.display = 'block';
        lis.style.display = 'none';
        lis2.style.display = 'none';
    }
    lis1.onmouseout = function () {
        lis1.style.display = 'none';
        lis.style.display = 'none';
        lis2.style.display = 'none';
    }
    var juji2 = document.querySelector('.juji2 a');
    var lis2 = document.querySelector('.juji2 ul');
    juji2.onmouseover = function () {
        lis2.style.display = 'block';
        lis1.style.display = 'none';
        lis3.style.display = 'none';
    }
    lis2.onmouseover = function () {
        lis2.style.display = 'block';
        lis3.style.display = 'none';
    }
    lis2.onmouseout = function () {
        lis2.style.display = 'none';
        lis3.style.display = 'none';
    }
    var juji3 = document.querySelector('.juji3 a');
    var lis3 = document.querySelector('.juji3 ul');
    juji3.onmouseover = function () {
        lis3.style.display = 'block';
        lis2.style.display = 'none';
    }
    lis3.onmouseover = function () {
        lis3.style.display = 'block';
        lis2.style.display = 'none';
    }
    lis3.onmouseout = function () {
        lis3.style.display = 'none';
        lis2.style.display = 'none';
    }

</script>